﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>易买网 - 首页</title>
	<link type="text/css" rel="stylesheet" href="css/style.css"/>
	<script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="scripts/function.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="plugins/element-ui/element-ui.css">
	<script type="text/javascript" src="plugins/axios/axios.min.js"></script>
	<script type="text/javascript" src="scripts/request.js"></script>
	<style type="text/css">
		.el-input-number__decrease, .el-input-number__increase {
			height: 95%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

	</style>
</head>
<body>
<div id="app">
	<div id="header" class="wrap">
		<div id="logo"><img src="images/logo.gif"/></div>
		<div class="help"><a href="shopping.html" class="shopping">购物车{{ this.shoppingCar.length }}件</a><a
				href="login.html">登录</a><a
				href="register.html">注册</a><a href="guestbook.html">留言</a><a href="manage/index.html">后台管理</a>
		</div>
		<div class="navbar">
			<ul class="clearfix">
				<li class="current"><a href="#">首页</a></li>
				<li><a href="#">图书</a></li>
				<li><a href="#">百货</a></li>
				<li><a href="#">品牌</a></li>
				<li><a href="#">促销</a></li>
			</ul>
		</div>
	</div>
	<div id="childNav">
		<div class="wrap">
			<ul class="clearfix">
				<li class="first"><a href="#">音乐</a></li>
				<li><a href="#">影视</a></li>
				<li><a href="#">少儿</a></li>
				<li><a href="#">动漫</a></li>
				<li><a href="#">小说</a></li>
				<li><a href="#">外语</a></li>
				<li><a href="#">数码相机</a></li>
				<li><a href="#">笔记本</a></li>
				<li><a href="#">羽绒服</a></li>
				<li><a href="#">秋冬靴</a></li>
				<li><a href="#">运动鞋</a></li>
				<li><a href="#">美容护肤</a></li>
				<li><a href="#">家纺用品</a></li>
				<li><a href="#">婴幼奶粉</a></li>
				<li><a href="#">饰品</a></li>
				<li class="last"><a href="#">Investor Relations</a></li>
			</ul>
		</div>
	</div>
	<div id="position" class="wrap">
		您现在的位置：<a href="index.html">易买网</a> &gt;
		<a href="#">{{ pName }}</a> &gt;
		<a :href=`product-list.html?id=${product.id}&pName=${pName}&sName=${sName}`>{{ sName }}</a> &gt;
		{{ product.name }}
	</div>
	<div id="main" class="wrap">
		<div class="lefter">
			<div class="box">
				<h2>商品分类</h2>
				<dl v-for="(item1, index) in parentList" :key="item1.id">
					<dt @click="toggleVisibility(index)">{{ item1.name }}</dt>
					<dd v-show="item1.visible" v-for="item2 in item1.subCategories" :key="item2.id">
						<a :href=`product-list.html?id=${item2.id}&pName=${item1.name}&sName=${item2.name}`>
							{{ item2.name}}</a>
					</dd>
				</dl>
			</div>
		</div>
		<div id="product" class="main">
			<h1>{{ product.name }}</h1>
			<div class="infos">
				<div class="thumb"><img @mouseenter="handleMouseEnter()"
										@mouseleave="handleMouseLeave()"
										:src=`/common/download?name=${product.photo}`
										width="110" height="106"/>
				</div>
				<div class="buy">
					商城价：<span class="price">￥{{ product.price }}</span><br/>
					<div v-if="String(product.number) === '0'">库　存：缺货</div>
					<div v-else>
						<p>库　存：有货</p>
						<el-input-number
								v-model="num"
								@change="handleChange"
								size="small"
								:min="1"
								:max="product.price"
								label="购买数量">
						</el-input-number>
					</div>
					<div class="button" v-show="isAttributeVisible">
						<input type="button"
							   name="button"
							   value=""
							   @click="handleClick"/>
						<a @click.prevent="goToShoppingCar" style="cursor: pointer">放入购物车</a>
					</div>
				</div>
				<div class="clear"></div>
			</div>
			<div class="introduce">
				<h2><strong>商品详情</strong></h2>
				<div class="text">
					{{ product.detail }}
				</div>
			</div>
		</div>
		<div class="clear"></div>
	</div>
	<div id="footer">
		Copyright &copy; 2013 项目组 All Rights Reserved. 京ICP证1000001号
	</div>
</div>


<script type="text/javascript" src="plugins/vue/vue.js"></script>
<script type="text/javascript" src="api/user.js"></script>
<script type="text/javascript" src="api/parentCategories.js"></script>
<script type="text/javascript" src="api/product.js"></script>
<script type="text/javascript" src="api/common.js"></script>
<!-- 引入组件库 -->
<script type="text/javascript" src="plugins/element-ui/element-ui.js"></script>
<script type="text/javascript">
	// 检测URL参数
	const urlParams = new URLSearchParams(window.location.search);
	const id = urlParams.get('id');

	const app = new Vue({
		el: '#app',
		data: {
			isAttributeVisible: true, // 控制属性显示/隐藏的布尔值
			shoppingCar: [],
			num: 1,
			loading: false,
			product: '',
			pName: '',
			sName: '',
			parentList: [],
			ordersDetailList: []
		},
		async mounted() {
			this.loading = true
			this.pName = urlParams.get('pName');
			this.sName = urlParams.get('sName');
			await this.getProduct()
			await this.getParentCategories()
			this.parentList.forEach(item => {
				this.$set(item, 'visible', true);
			});
			sessionStorage.setItem("product", JSON.stringify(this.product))
			if (this.pName === null || this.sName === null) this.findCategoryName()
			this.shoppingCar = JSON.parse(sessionStorage.getItem("ordersDetailList")) === null ? [] : JSON.parse(sessionStorage.getItem("ordersDetailList"));
			this.loading = false
		},
		methods: {
			handleMouseEnter() {
				this.isAttributeVisible = false;
			},
			handleMouseLeave() {
				this.isAttributeVisible = true;
			},
			async getProduct() {
				const resp = await getProductApi(id)
				this.product = resp.data
			},
			async getParentCategories() {
				this.loading = true
				const list = await getParentCategoryAllList()
				this.parentList = list.data
				this.loading = false
			},
			toggleVisibility(index) {
				this.$set(this.parentList[index], 'visible', !this.parentList[index].visible);
			},
			findCategoryName() {
				for (const category of this.parentList) {
					for (const subCategory of category.subCategories) {
						if (subCategory.id === this.product.subId) {
							this.pName = category.name
							this.sName = subCategory.name
						}
					}
				}
			},
			handleClick() {
				if (String(this.product.number) === '0') {
					this.$message({
						message: '非常抱歉商品缺货噢',
						type: 'warning'
					});

				} else {
					this.ordersDetailList.push({
						productId: this.product.id,
						number: this.num,
						price: (this.product.price * this.num)
					})
					sessionStorage.setItem('ordersDetailList', JSON.stringify(this.ordersDetailList))

					window.location.href = "address.html"
				}
			},
			handleChange(value) {
				console.log(value);
			},
			goToShoppingCar() {
				this.ordersDetailList = JSON.parse(sessionStorage.getItem('ordersDetailList'))
				if (this.ordersDetailList === null) this.ordersDetailList = []
				this.ordersDetailList.push({
					name: this.product.name,
					photo: this.product.photo,
					productId: this.product.id,
					number: this.num,
					price: (this.product.price * this.num)
				})
				sessionStorage.setItem('ordersDetailList', JSON.stringify(this.ordersDetailList))
				this.$message({
					showClose: true,
					message: "成功加入购物车！",
					type: 'success'
				});
				this.shoppingCar = JSON.parse(sessionStorage.getItem("ordersDetailList")) === null ? [] : JSON.parse(sessionStorage.getItem("ordersDetailList"));
			}
		}
	})

</script>
</body>
</html>
